<template>
  <!--各种申请操作-->
  <section class="component check-confirm">
    <div class="content">
      <p><b>您当前所选的案件，因以下原因需确认是否继续操作：</b></p>
      <p>确认案件总数{{messageData.countCase}}，以下案件已存在且在催收中，确认后将以本次导入信息为准更新案件信息</p>
      <div v-for="(item,index) of dataSet" :key="index" class="content-item">
        <div class="detail-content">
          <span>案件数量：</span><span style="color:red">{{item.contractNumberList.length}}</span>
          <a class="view-detail" @click="item.show = !item.show">
            查看详情 <svg-icon iconName="xiala" :class="{'detail-show':item.show}"></svg-icon>
          </a>
          <el-input type="textarea" v-show="item.show" :value="item.contractNumberList.join('    ')" :maxlength="300" show-word-limit></el-input>
        </div>
      </div>
      <p v-if="status !== 0">确定是否要继续操作？</p>
    </div>
    <div class="check-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="emitSuccess">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { CaseApplyRecordService } from '~/services/domain-service/case-apply-record.service';
import { Prop, Emit, Watch } from "vue-property-decorator"
import SvgIcon from "~/components/common/svg-icon.vue"
import { ApplyType } from "~/config/enum.config"

@Component({
  components: {
    SvgIcon
  },
})
export default class CheckConfirm extends Vue {
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;

  @Prop({ required: true, type: Object })
  private messageData

  private dataSet: any[] = []

  private status: any = null

  @Emit("success")
  private emitSuccess() { }

  @Emit("close")
  private emitClose() { }

  @Watch('messageData', { immediate: true })
  private onMessageDataChange(val) {
    if(!val || !val.messageModels) return
    this.dataSet = val.messageModels.map(v => ({...v,show:false}))
    this.status = val.status
  }
}
</script>

<style lang="less" scoped>
.component.check-confirm {
  .view-detail {
    margin-left: 20px;
  }
  .detail-show {
    transform: rotate(180deg);
  }
  .check-buttons {
    margin: 20px 0;
    text-align: right;
    padding-right: 40px;
  }
  .content {
    .content-item {
      margin: 20px;
    }
    .detail-content {
      padding-left: 10px;
    }
  }
}
</style>
